<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 点种以后使用红色 */
        .router-link-active{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <span><router-link to = "/register" >注册</router-link></span>
        <span><router-link to = "/login">登录</router-link></span>
        <span><router-link to = "/userInfo">查看用户信息</router-link></span>
        <!-- html不区分大小写，在这里用-分割表示对应驼峰命名 -->
        <!-- <log-form></log-form>-->
         <!-- <register-form></register-form> -->
        <!-- 使用vue-router后，使用router-view显示配置的组件 -->
        <router-view></router-view>      
    </div>
    <!-- 注意模板要写在对象的外面 -->
    <template id="info">
        <div>
            <h5>查看用户的信息</h5>
            <span><router-link to = "/userInfo/lingling" >林志玲</router-link></span>
            <span><router-link to = "/userInfo/feifei">刘亦菲</router-link></span>
            <router-view></router-view>
        </div>
    </template>
    <template id="lingling">
        <div>
            <h3>志玲姐在我心中永远18岁</h3>
        </div>
    </template>
    <template id="feifei">
        <div>
            <h3>小菲菲还是有些神仙气质</h3>
        </div>
    </template>
    
    
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script src="./js/login.js"></script>
<script src="./js/register.js"></script>
<script>
    const userInfo = {
        template:"#info"
    }
    const lingling = {
        template:"#lingling"
    }
    const feifei = {
        template:"#feifei"
    }

    const router = new VueRouter({
        routes: [
            //path一定用/开头
            {path:"/login",component:logForm},
            {path:"/register",component:registerForm},
            {
                path:"/userInfo",
                component:userInfo,
                children:[
                    {path:"lingling",component:lingling},
                    {path:"feifei",component:feifei},
                   
                ]
            },
            {path:"*",redirect:"/login"} //设置默认页的写法
        ]
    });


    const app = new Vue({
        el:"#app",
        // 使用路由后，此处的组建无需再次引入，因为在路由中已经完成引入
        // components:{
        //     logForm,
        //     registerForm
        // },
        //这里千万不要遗忘
        router
        
    });
</script>
</html>